<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddPolygon.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map, mapUtil) => {

      let pointList = [
        [-0.131049, 51.498568],
        [-0.107049, 51.498568],
        [-0.107049, 51.493568],
        [-0.131049, 51.493568],
        [-0.131049, 51.498568]
      ]
      mapUtil.setView(pointList)


      let polygon = new maptalks.Polygon([pointList], {
        symbol: {
          "lineColor": "#34495e",
          "lineWidth": 2,
          "polygonFill": "rgb(135,196,240)",
          "polygonOpacity": 0.2,
          "markerType": "ellipse",
          "markerFill": "#1bbc9b",
          "markerLineColor": "#000",
          "markerWidth": 30,
          "markerHeight": 30,
          "markerPlacement": "point", // point, vertex, vertex-first, vertex-last, line
          "textName": "A",
          "textPlacement": "vertex",   // point, vertex, vertex-first, vertex-last, line
          "textFill": "#fff"
        }
      });

      new maptalks.VectorLayer(MapLayerConst.MAP_POLYGON_LAYER).addGeometry(polygon).addTo(map);
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>
